<template>
  <div id="info-uploader">
    <pakj-field>
      <pakj-field-item title="身份证正面" :arrow="form.driverIdPhotoFront==''?'arrow-right':'right'" @click="chooseDriverIdPhotoFront"></pakj-field-item>
      <pakj-field-item title="身份证背面" :arrow="form.driverIdPhotoReverse==''?'arrow-right':'right'" @click="chooseDriverIdPhotoReverse"></pakj-field-item>
      <pakj-field-item title="驾驶证" :arrow="form.drivingLicenceFront==''?'arrow-right':'right'" @click="chooseDrivingLicenceFront"></pakj-field-item>
      <pakj-field-item title="驾驶证副页" :arrow="form.drivingLicenceReverse==''?'arrow-right':'right'" @click="chooseDrivingLicenceReverse"></pakj-field-item>
      <pakj-field-item title="行驶证" :arrow="form.drivingLicensePhotoFront==''?'arrow-right':'right'" @click="chooseDrivingLicensePhotoFront"></pakj-field-item>
      <pakj-field-item title="行驶证副页" :arrow="form.drivingLicensePhotoReverse==''?'arrow-right':'right'" @click="chooseDrivingLicensePhotoReverse"></pakj-field-item>
    </pakj-field>
    <md-field>
      <md-field-item name="driverPhone" title="司机手机号码" customized align="center">
        <md-input-item
          ref="phoneInput"
          data-vv-name="手机号"
          v-model="form.driverPhone"
          placeholder="司机手机号码"
          v-validate="'required|phone'"
          :maxlength="11"
          type="phone"
        ></md-input-item>
      </md-field-item>
    </md-field>
    <md-button @click="submit">提交</md-button>
  </div>
</template>
<script>
import { Icon, Dialog, Field, FieldItem, InputItem, Button, Toast } from 'mand-mobile';
import WxUtils from '@/common/weixinUtils';
import http from '@/common/http';
import Oss from '@/common/ossUtils';
import Utils from '@/common/pakjUtils';
import PakjField from '@/components/fields/Field';
import PakjFieldItem from '@/components/fields/FieldItem';
export default {
  name: 'info-uploader',
  components: {
    [InputItem.name]: InputItem,
    [Icon.name]: Icon,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [PakjField.name]: PakjField,
    [PakjFieldItem.name]: PakjFieldItem,
    [Button.name]: Button
  },
  data() {
    return {
      form: {
        driverPhone: '', // 司机手机号码
        driverIdPhotoFront: '', // 身份证正面URL
        driverIdPhotoReverse: '', // 身份证背面URL
        drivingLicenceFront: '', // 驾驶证主页URL
        drivingLicenceReverse: '', // 驾驶证附页URL
        drivingLicensePhotoFront: '', // 行驶证主页URL
        drivingLicensePhotoReverse: '' // 行驶证附页URL
      }
    };
  },
  created() {
    WxUtils.wxConfig(['chooseImage', 'getLocalImgData']);
  },
  methods: {
    submit() {
      console.log(this.form);
      if (
        this.form.driverIdPhotoFront === '' ||
        this.form.driverIdPhotoReverse === '' ||
        this.form.drivingLicenceFront === '' ||
        this.form.drivingLicenceReverse === '' ||
        this.form.drivingLicensePhotoFront === '' ||
        this.form.drivingLicensePhotoReverse === ''
      ) {
        Toast({
          content: '请上传全部照片',
          duration: 3000
        });
        return;
      }
      debugger;
      this.$validator.validateAll().then(res => {
        if (this.errors.has('手机号')) {
          Toast({
            content: this.errors.all()[0],
            duration: 3000
          });
        } else {
          http.post('/pakj/driverimg/saveDriverImg', this.form).then(res => {
            console.log(res);
            if (res.data.code === '000000') {
              this.form = {
                driverPhone: '', // 司机手机号码
                driverIdPhotoFront: '', // 身份证正面URL
                driverIdPhotoReverse: '', // 身份证背面URL
                drivingLicenceFront: '', // 驾驶证主页URL
                drivingLicenceReverse: '', // 驾驶证附页URL
                drivingLicensePhotoFront: '', // 行驶证主页URL
                drivingLicensePhotoReverse: '' // 行驶证附页URL
              };
              Dialog.succeed({
                content: '司机信息已经提交'
              });
            }
          });
        }
      });
    },
    chooseDriverIdPhotoFront() {
      this.chooseAndUpload().then(res => {
        this.form.driverIdPhotoFront = res;
      });
    },
    chooseDriverIdPhotoReverse() {
      this.chooseAndUpload().then(res => {
        this.form.driverIdPhotoReverse = res;
      });
    },
    chooseDrivingLicenceFront() {
      this.chooseAndUpload().then(res => {
        this.form.drivingLicenceFront = res;
      });
    },
    chooseDrivingLicenceReverse() {
      this.chooseAndUpload().then(res => {
        this.form.drivingLicenceReverse = res;
      });
    },
    chooseDrivingLicensePhotoFront() {
      this.chooseAndUpload().then(res => {
        this.form.drivingLicensePhotoFront = res;
      });
    },
    chooseDrivingLicensePhotoReverse() {
      this.chooseAndUpload().then(res => {
        this.form.drivingLicensePhotoReverse = res;
      });
    },
    chooseAndUpload() {
      return new Promise((resolve, reject) => {
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            wx.getLocalImgData({
              localId: res.localIds[0], // 图片的localID
              success: function(res) {
                if (
                  Utils.getOSName()
                    .toLowerCase()
                    .indexOf('android') >= 0
                ) {
                  res.localData = 'data:image/jpeg;base64,' + res.localData;
                } else if (
                  Utils.getOSName()
                    .toLowerCase()
                    .indexOf('ios') >= 0
                ) {
                  // ios process
                }
                Oss.upload(res.localData, 'infouploader')
                  .then(res => {
                    resolve(res);
                  })
                  .catch(reason => {
                    reject(reason);
                  });
              }
            });
          }
        });
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
#info-uploader {
  padding: 20px;
}
</style>